import WebPlayer from '../components/WebPlayer'
import example from '../examples/networking_redux'


By default, Redux only handles synchronous actions. However, there are some great middlewares (plugins) for handling asynchronous actions.

For small to medium apps, the [redux-thunk](https://github.com/gaearon/redux-thunk) middleware is extremely effective. It's also created by the author of redux, so it's pretty much guaranteed to be high-quality and up-to-date.

For large apps with very complex asynchronous chains of events, you may want to consider [redux-saga](https://github.com/yelouafi/redux-saga), which is an extremely powerful but mind-bendingly complex framework for managing flow control. You can think of sagas as background daemon processes, which you can fork and join, maintaining complete control over the asynchronous events in your app. These are also great for testability.

# Posts Example

Let's look at `redux-thunk` in action. We'll automatically fetch posts when the app starts, and provide a button to refresh them.

Thanks to Redux Thunk, we can now dispatch functions. When we dispatch a function, we must return a function that takes `(dispatch, getState)` as props. Using `dispatch`, our function can dispatch other actions. We can also view the current state of the store by calling `getState()`.

## Files

- `index.js`<br />
  This file handles creating the redux store and passing it to our `Provider`. It also handles applying the `thunk` middleware to our store, for handling asynchronous actions.

- `postsRedux.js`<br />
  This contains the actionCreators and reducer for fetching posts and updating the store.

- `App.js`<br />
  `App` is connected to the store using `connect()`. It pulls the post data, along with loading and error states, out of the redux store.

<WebPlayer {...example} />
